<template>
  <div class="goods-new">
    <goods-nav-bar></goods-nav-bar>
    <div class="banner">
      <img src="@/assets/img/new-goods/banner.png" alt="" />
    </div>
    <goods-tab-control @tabControlClick="tabControlClick"></goods-tab-control>
    <goods-list :goodsList="goodsList"></goods-list>
  </div>
</template>

<script>
import { getGoodList } from "@/network/home";
import GoodsNavBar from "./children/GoodsNavBar.vue";
import GoodsTabControl from "./children/GoodsTabControl";
import GoodsList from "./children/GoodsList";
export default {
  components: {
    GoodsNavBar,
    GoodsTabControl,
    GoodsList,
  },
  data() {
    return {
      goodsList: [],
      order: null,
    };
  },
  created() {
    this.getGoodLists();
  },
  methods: {
    getGoodLists() {
      console.log(this.$route.query);
      const data = {
        isHot: this.$route.query.isHot ? this.$route.query.isHot : null,
        isNew: this.$route.query.isNew ? this.$route.query.isNew : null,
        // order: "desc",
        order: this.order,
      };
      getGoodList(data).then((res) => {
        this.goodsList = res.data;
        console.log(this.goodsList);
      });
    },
    tabControlClick(index) {
      console.log(index);
      if (index == 1) {
        this.order = "desc";
        this.getGoodLists();
      } else {
        this.order = null;
        this.getGoodLists();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-new {
  background-color: #f4f4f4;
  .banner {
    margin-top: 44px;
    height: 139px;
    img {
      width: 100%;
    }
  }
}
</style>